<!-- components/CommentPopup.vue -->
<template>
  <u-popup v-model="show" mode="bottom" height="70%" border-radius="20">
    <view class="comment-popup">
      <view class="header">
        <text>评论 {{currentItem.commentCount}}</text>
        <u-icon name="close" @click="close"></u-icon>
      </view>
      
      <!-- 评论内容 -->
      <scroll-view class="comment-list" scroll-y>
        <!-- 弹幕区域 -->
        <view class="danmu-area" v-if="showDanmu">
          <view class="danmu-item" 
                v-for="(item, index) in danmuList" 
                :key="index"
                :style="getDanmuStyle(index)">
            <image class="avatar" :src="item.avatar"></image>
            <text class="content">{{item.content}}</text>
          </view>
        </view>
        
        <!-- 普通评论 -->
        <view class="normal-comment" v-if="!showDanmu">
          <view class="comment-item" v-for="item in commentList" :key="item.id">
            <image class="avatar" :src="item.avatar"></image>
            <view class="right">
              <view class="info">
                <text class="name">{{item.nickname}}</text>
                <text class="time">{{formatTime(item.time)}}</text>
              </view>
              <view class="content">{{item.content}}</view>
              <view class="actions">
                <view class="like" @click="likeComment(item)">
                  <u-icon name="thumb-up" size="20" :color="item.isLiked ? '#2979ff' : '#999'"></u-icon>
                  <text>{{item.likeCount}}</text>
                </view>
                <view class="reply" @click="replyComment(item)">
                  <u-icon name="chat" size="20" color="#999"></u-icon>
                  <text>回复</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      
      <!-- 底部输入框 -->
      <view class="input-area">
        <u-input v-model="commentContent" 
                 placeholder="说点什么..." 
                 border="none"
                 shape="circle"
                 :clearable="false"></u-input>
        <view class="mode-switch" @click="toggleMode">
          <u-icon :name="showDanmu ? 'list' : 'grid'" size="24"></u-icon>
        </view>
        <u-button size="mini" @click="submitComment">发送</u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    currentItem: Object
  },
  data() {
    return {
      show: false,
      showDanmu: false,
      commentContent: '',
      commentList: [],
      danmuList: [],
      danmuPositions: []
    }
  },
  methods: {
    show() {
      this.show = true
      this.getComments()
    },
    close() {
      this.show = false
    },
    toggleMode() {
      this.showDanmu = !this.showDanmu
      if (this.showDanmu) {
        this.startDanmu()
      } else {
        this.stopDanmu()
      }
    },
    // 获取评论
    async getComments() {
      const res = await uni.request({
        url: '/api/wall/comments',
        data: { id: this.currentItem.id }
      })
      this.commentList = res.data
    },
    // 提交评论
    async submitComment() {
      if (!this.commentContent.trim()) return
      
      const res = await uni.request({
        url: '/api/wall/comment',
        method: 'POST',
        data: {
          id: this.currentItem.id,
          content: this.commentContent
        }
      })
      
      if (this.showDanmu) {
        this.danmuList.push({
          avatar: res.data.avatar,
          content: this.commentContent
        })
      } else {
        this.commentList.unshift(res.data)
      }
      
      this.commentContent = ''
    },
    // 开始弹幕
    startDanmu() {
      this.danmuTimer = setInterval(() => {
        if (this.danmuList.length > 0) {
          this.danmuPositions = this.danmuList.map(() => ({
            top: Math.random() * 70 + '%',
            duration: Math.random() * 3 + 5 + 's'
          }))
        }
      }, 1000)
    },
    // 停止弹幕
    stopDanmu() {
      clearInterval(this.danmuTimer)
    },
    // 获取弹幕样式
    getDanmuStyle(index) {
      if (this.danmuPositions[index]) {
        return {
          top: this.danmuPositions[index].top,
          animationDuration: this.danmuPositions[index].duration
        }
      }
      return {}
    }
  }
}
</script>

<style scoped>
.comment-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 32rpx;
  font-weight: bold;
}

.comment-list {
  flex: 1;
  padding: 20rpx;
}

/* 弹幕样式 */
.danmu-area {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.danmu-item {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 8rpx 20rpx;
  border-radius: 40rpx;
  animation: danmu linear;
}

.danmu-item .avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

@keyframes danmu {
  from { transform: translateX(0); }
  to { transform: translateX(-200%); }
}

/* 普通评论样式 */
.comment-item {
  display: flex;
  margin-bottom: 30rpx;
}

.comment-item .avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.comment-item .right {
  flex: 1;
}

.comment-item .info {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.comment-item .name {}